<template>
  <d2-container>


    <el-row :gutter="80">

      <!--       左边 用户信息 公司信息-->
      <el-col :span="12">

        <el-form label-position="left" label-width="80px">

          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false">
            <img v-if="true"
                 src="https://www.baidu.com/link?url=atHMkn0hNDVSU1cTffAEyLf4XR6inkNVnkudy9eYOa5SGBRUPQRqtpU1YEpwNtq7&ck=8456.9.107.193.494.336.207.1&shh=www.baidu.com&wd=&eqid=d118aeae00035b660000000660113bac"
                 class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

          <el-form-item label="用户名">
            <el-input v-model="userInfo.username" readonly :dispaly="true"></el-input>
          </el-form-item>


          <el-form-item label="真实姓名">
            <el-input v-model="userInfo.realName" ></el-input>
          </el-form-item>

          <el-form-item label="性别">
            <el-select v-model="userInfo.sex" placeholder="性别">
              <el-option label="男" :value="0"></el-option>
              <el-option label="女" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="昵称">
            <el-input v-model="userInfo.nickname"></el-input>
          </el-form-item>


          <el-form-item label="手机号">
            <el-input v-model="userInfo.phone"></el-input>
          </el-form-item>


          <el-form-item label="QQ">
            <el-input v-model="userInfo.qq"></el-input>
          </el-form-item>


          <el-form-item label="邮箱">
            <el-input v-model="userInfo.email"></el-input>
          </el-form-item>

          <el-form-item label="最后登录">
            <el-input v-model="userInfo.lastTime"></el-input>
          </el-form-item>
        </el-form>
      </el-col>

      <!--        右边部门 权限栏目-->
      <el-col :span="12">

        <el-row>

          <!-- 部门-->
          <el-col :span="24">

            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>所属部门</span>
              </div>
              <div>

                <el-tree :data="departmentInfoList" :props="departmentProps"></el-tree>
              </div>
            </el-card>

            <br/>
          </el-col>

          <!--  权限列表-->
          <el-col :span="24">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>拥有权限</span>
              </div>
              <div>
                <el-tabs type="border-card">
                  <el-tab-pane :label="permissionRelation[index]"
                               v-for="(permissionInfo,name,index) in permissionsInfoList" :key="index"
                               v-if="permissionInfo.length !== 0">

                    <div v-for="(permission, itemIndex) in permissionInfo" :key="itemIndex">
                      <el-row :gutter="8">
                        <el-col :span="7">
                          <el-tag type="success">{{permission.permissionName}}</el-tag>
                        </el-col>
                      </el-row>
                    </div>

                  </el-tab-pane>
                </el-tabs>


              </div>
            </el-card>
          </el-col>

        </el-row>

      </el-col>
    </el-row>

  </d2-container>
</template>

<script>
  import { mapState, mapActions } from 'vuex'

  export default {
    name: 'userInfo',
    components: {},
    data () {
      return {
        permissionRelation: ['操作权限', '页面权限', '系统权限'],
        departmentProps: {
          children: 'children',
          label: 'departmentName'
        }
      }
    },
    computed: {
      ...mapState('d2admin/user', [
        'userInfo',
        'companyInfo',
        'departmentInfoList',
        'permissionsInfoList',
      ])
    },
    mounted: function () {
    },
    methods: {}
  }
</script>

<style scoped>

</style>
